<template>
  <template v-for="subItem in menuList" :key="subItem.id">
    <el-sub-menu v-if="subItem.children?.length" :index="subItem.id">
      <template #title>
        <div class="submenu-item" @click="handleSelect(subItem?.id)">
          <img class="xfolder-table mr-step" src="@assets/images/folder.webp" alt="" />
          <span class="sle" :class="{xactive: subItem?.formId === workSpaceId}">{{ subItem.name }}</span>
        </div>
      </template>
      <SubMenu :menu-list="subItem.children" @select="handleSelect" />
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.id">
      <template #title>
        <div class="submenu-item" @click="handleSelect(subItem?.id)">
          <img class="xfolder-table mr-step" src="@assets/images/folder.webp" alt="" />
          <span class="sle" :class="{xactive: subItem?.formId === workSpaceId}">{{ subItem.name }}</span>
        </div>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { type MenuItem } from '@/management/utils/types/formsTypes'
defineProps<{ menuList: MenuItem[] }>();
const store = useStore()
const emit = defineEmits(['select'])
const handleSelect = (id: any) => {
  emit('select', id)
}
const workSpaceId = computed(() => {
  return store.state.dataform.workSpaceId
})
</script>
<style lang="scss" scoped>
.submenu-item {
  display: flex;
  align-items: center;
  .xfolder-table {
    width: 16px;
  }

  .sle.xactive {
    color: var(--el-color-primary);
  }
}
</style>